<template>
  <view class="custom" :style="{
    '--height': systemHeight + 'px',
    '--margintop': systemTop + 'px',
    '--color': color,
    backgroundColor: background,
  }">
    <view class="left_area" @click="leftClick">
      <view v-if="leftIcon" class="custom-icon-jiantou2 custom-icon"></view>
    </view>
    <view class="title">
      {{ title }}
    </view>
    <view class="right_area"></view>
  </view>
</template>

<script>
export default {
  props: {
    title: { 
      tpye: String,
      default: "",
    },
    leftIcon: {
      tpye: Boolean,
      default: true,
    },
    color: {
			type: String,
			default: "#000000",
		},
    background: {
			type: String,
			default: "transparent",
		},
  },
  methods: {
    leftClick() {
			this.$emit("leftClick");
		},
  },
  data() {
    return {
      systemHeight: "",
      systemTop: "",
    };
  },
  mounted(){
    const systemInfo = uni.getMenuButtonBoundingClientRect();
    this.systemHeight = systemInfo.height;
    this.systemTop = systemInfo.top;
  },
};
</script>

<style lang="scss" scoped>
.custom {
  @include container(100%, calc(var(--height) + var(--margintop)));
  padding: var(--margintop) 20rpx 0;
  @include flex-layout(space-between, center);
  .left_area,.right_area {
    @include container(100rpx);
  }
  .custom-icon {
    @include font-style(20px, var(--color), bold);
  }
  .title {
    @include container(360rpx, var(--height));
    @include font-style(36rpx, var(--color), bold);
    @include text-ellipsis;
    line-height: var(--height);
    text-align: center;
    margin: 0 auto;
  }
}
</style>
